﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>US County Unemployment Rates</title>

    <!--
        Choropleth of unemployment rates in US counties.
        Based on: http://bl.ocks.org/mbostock/4060606
        -->

    <link rel="stylesheet" href="styles/ColorGradients.css" />

    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>

    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <style type="text/css">
        .counties {
            fill: none;
            fill-opacity: 0.7;
            stroke: #000;
            stroke-width: .5px;
            stroke-linejoin: round;
        }

            .counties path:hover {
                fill: rgba(255, 0, 0, 0.8);
            }

        .states {
            fill: none;
            stroke: #fff;
            stroke-linejoin: round;
            stroke-width: 2px;
        }
    </style>
</head>
<body onload="getMap()">
    <div id="myMap"></div>
    <script type="text/javascript">
    var map, d3MapTools, choroplethLayer, counties, states;

    function getMap(){
        map = new Microsoft.Maps.Map(document.getElementById('myMap'),{
            credentials: 'YOUR_BING_MAPS_KEY',
            center:new Microsoft.Maps.Location(52,-115),
            zoom:4
        });

        //Register and load the D3 Overlay Module
        Microsoft.Maps.registerModule("D3OverlayModule", "scripts/D3OverlayManager.js");
        Microsoft.Maps.loadModule("D3OverlayModule", {
            callback: loadChoropleth
        });
    }

    function loadChoropleth() {
        d3MapTools = new D3OverlayManager(map);
        choroplethLayer = d3MapTools.addLayer({
            loaded: function (svg, projection) {
                var rateById = d3.map();

                var quantize = d3.scale.quantize()
                    .domain([0, .15])
                    .range(d3.range(9).map(function (i) { return "q" + i + "-9"; }));

                queue()
                .defer(d3.json, "data/US_States_Counties_TopoJson.js")
                .defer(d3.tsv, "data/US_Counties_Unemployment.tsv", function (d) { rateById.set(d.id, +d.rate); })
                .await(function (error, us) {
                    counties = svg.append("g")
                      .attr("class", "counties PuBu")
                    .selectAll("path")
                      .data(topojson.feature(us, us.objects.counties).features)
                    .enter().append("path")
                      .attr("class", function (d) { return quantize(rateById.get(d.id)); })
                      .attr("d", projection)
                    .on('click', function (feature) {
                        alert('Unemployment rate: ' + (rateById.get(feature.id) * 100).toFixed(2) + '%');
                    });

                    states = svg.append("path")
                        .datum(topojson.mesh(us, us.objects.states, function (a, b) { return a !== b; }))
                        .attr("class", "states")
                        .attr("d", projection);
                });
            }
        });
    }
    </script>
</body>
</html>
